import React from 'react';
import { Link } from 'react-router-dom';


import styles from './index.module.less';

export default class Category extends React.Component {
  state = {
    categoryMenu: [
      {
        key: 1,
        name: '废金属',
        active: false,
        icon: 'icon-feijinshu',
        category: [
          {
            key: 100,
            name: '有色金属',
            children: [
              { key: 101, name: '废铝' },
              { key: 102, name: '废铜' },
              { key: 103, name: '废锡' },
              { key: 104, name: '废铅' },
              { key: 105, name: '废锌' },
              { key: 106, name: '铝合金' },
              { key: 107, name: '废镍' },
              { key: 108, name: '废锑' },
              { key: 109, name: '废锰' },
              { key: 110, name: '废铝' },
              { key: 111, name: '废镁' },
              { key: 112, name: '废镉' },
              { key: 113, name: '废钠' },
              { key: 114, name: '废钙' },
              { key: 115, name: '废钾' },
              { key: 116, name: '废锶' },
              { key: 117, name: '废錋' },
              { key: 118, name: '废铋' },
              { key: 119, name: '废钴' },
              { key: 120, name: '其他有色金属' },
            ],
          },
          {
            key: 200,
            name: '稀有金属',
            children: [
              { key: 201, name: '废钛' },
              { key: 202, name: '废钒' },
              { key: 203, name: '废铌' },
              { key: 204, name: '废钽' },
              { key: 205, name: '废钨' },
              { key: 206, name: '废钼' },
              { key: 207, name: '废铍' },
              { key: 208, name: '废锆' },
              { key: 209, name: '废锂' },
              { key: 210, name: '废铼' },
              { key: 211, name: '废镓' },
              { key: 212, name: '废铟' },
              { key: 213, name: '废硒' },
              { key: 214, name: '废铷' },
              { key: 215, name: '废铪' },
              { key: 216, name: '废锗' },
              { key: 217, name: '废镝' },
              { key: 218, name: '其他稀有金属' },
            ],
          },
          {
            key: 300,
            name: '废钢铁',
            children: [
              { key: 301, name: '废钢' },
              { key: 302, name: '废不锈钢' },
              { key: 303, name: '废钢材' },
              { key: 304, name: '废钢轨' },
              { key: 305, name: '合金钢' },
              { key: 306, name: '废铁' },
              { key: 307, name: '废铁屑' },
              { key: 308, name: '边角料' },
              { key: 309, name: '铁矿石' },
              { key: 310, name: '钢铁制品' },
              { key: 311, name: '废钢管' },
              { key: 312, name: '废矽钢' },
              { key: 313, name: '废钢筋' },
              { key: 314, name: '废钢板' },
              { key: 315, name: '废钨钢' },
              { key: 316, name: '废结构' },
              { key: 317, name: '其他废钢铁' },
            ],
          },
          {
            key: 400,
            name: '贵金属',
            children: [
              { key: 401, name: '废金' },
              { key: 402, name: '废银' },
              { key: 403, name: '废铑' },
              { key: 404, name: '废钯' },
              { key: 405, name: '废铂' },
              { key: 406, name: '废钌' },
              { key: 407, name: '废锇' },
              { key: 408, name: '废铱' },
              { key: 409, name: '黄金' },
              { key: 410, name: '白银' },
              { key: 411, name: '铂金' },
              { key: 412, name: '钯金' },
              { key: 413, name: '其他贵金属' },
            ],
          },
          {
            key: 500,
            name: '再生金属',
            children: [
              { key: 501, name: '再生铜' },
              { key: 502, name: '再生铅' },
              { key: 503, name: '再生镍' },
              { key: 504, name: '再生铁' },
              { key: 505, name: '再生铝' },
              { key: 506, name: '再生钢' },
              { key: 507, name: '再生镁' },
              { key: 508, name: '再生锡' },
              { key: 509, name: '再生锌' },
              { key: 510, name: '再生钼' },
              { key: 511, name: '再生金' },
              { key: 512, name: '再生银' },
              { key: 513, name: '其他再生金属' },
            ],
          },
          {
            key: 600,
            name: '再生金属',
            children: [
              { key: 601, name: '废五金' },
              { key: 602, name: '废合金' },
              { key: 603, name: '废硅' },
              { key: 604, name: '废阀门' },
              { key: 605, name: '废轴承' },
              { key: 606, name: '金属制品' },
              { key: 607, name: '金属材料' },
              { key: 608, name: '废尾矿' },
              { key: 609, name: '废模具' },
              { key: 610, name: '废磁铁' },
              { key: 611, name: '金属助剂' },
              { key: 612, name: '其他废金属' },
            ],
          },
        ],
      },
      {
        key: 2,
        name: '废塑料',
        active: false,
        icon: 'icon-feisuliao',
        category: [],
      },
      {
        key: 3,
        name: '废纸',
        active: false,
        icon: 'icon-feizhi',
        category: [],
      },
      {
        key: 4,
        name: '二手设备',
        active: false,
        icon: 'icon-ershoushebei',
        category: [],
      },
      {
        key: 5,
        name: '纺织皮革',
        active: false,
        icon: 'icon-fangzhipige',
        category: [],
      },
      {
        key: 6,
        name: '电子电器',
        active: false,
        icon: 'icon-dianzidianqi',
        category: [],
      },
      {
        key: 7,
        name: '轮胎橡胶',
        active: false,
        icon: 'icon-luntaixiangjiao',
        category: [],
      },
      {
        key: 8,
        name: '交通运输',
        active: false,
        icon: 'icon-jiaotongyunshu',
        category: [],
      },
      {
        key: 9,
        name: '家具木材',
        active: false,
        icon: 'icon-jiajumucai',
        category: [],
      },
      {
        key: 10,
        name: '其他废品',
        active: false,
        icon: 'icon-qitafeipin',
        category: [],
      },
    ],
    selectedChildren: null,
    selectedCategory: null,
    city: {
      cityList: [ '全国', '北京', '上海', '深圳', '广州', '杭州', '成都', '南京', '西安' ],
      allCity: [],
    },
  };

  componentDidMount() {
    this.setState({
      selectedChildren: 0,
      selectedCategory: 0,
    });
  }

  // 鼠标点击大类时，激活弹窗，并设置子类
  indexClick = index => {

    this.setState(prevState => {
      const { categoryMenu } = prevState;
      return {
        categoryMenu,
        selectedChildren: null,
        selectedCategory: index,
      };
    });
  };
  // 鼠标点击小类时,激活弹窗,并遍设置子类
  indexChildrenClick = index => {
    this.setState(prevState => {
      const { categoryMenu } = prevState;
      return {
        categoryMenu,
        selectedChildren: index,
        selectedCategory,
      };
    });
  };
  onPickUpClick() {
    this.setState(prevState => {
      const { categoryMenu } = prevState;
      return {
        categoryMenu,
        selectedChildren: null,
        selectedCategory: null,
      };
    });
  }
  render() {
    const { categoryMenu, selectedCategory, selectedChildren, city } = this.state;

    return (
      <div className={styles.Category}>
        <div className={styles.product}>
          <div className={styles.line}>
            <div className={styles.classify}>品类</div>
            <div className={styles.inlineblock + ' ' + styles.kinds}>
              <a href="">不限</a>
              <React.Fragment>
                {
                  categoryMenu.map((item, index) => {
                    return (
                      <Link to="/" key={item.key} onClick={this.indexClick.bind(this, index)}>{item.name}</Link>
                    );
                  })
                }
              </React.Fragment>
            </div>
            <div
              className={styles.pack}
              onClick={this.onPickUpClick.bind(this)}
              style={{ display: selectedCategory !== null ? 'inline-block' : 'none' }}
            >
              <a>收起</a>
              <i />
            </div>
          </div>
          <div
            className={styles.line}
            style={{ display: selectedCategory !== null ? 'block' : 'none' }}
          >
            <div className={styles.kinds}>
              <React.Fragment>
                { selectedCategory !== null && categoryMenu[selectedCategory].category.map((category, index) => {
                  return (
                    <Link to="/" key={category.key} onClick={this.indexChildrenClick.bind(this, index)}>{category.name}</Link>
                  );
                })
                }
              </React.Fragment>
            </div>
          </div>
          <div
            className={styles.line}
            style={{ display: selectedCategory !== null ? 'block' : 'none' }}
          >
            <div className={styles.kinds}>
              <React.Fragment>
                { selectedCategory !== null && selectedChildren !== null && categoryMenu[selectedCategory].category[selectedChildren].children.map((children, index) => {
                  return (
                    <Link to="/" key={children.key}>{children.name}</Link>
                  );
                })
                }
              </React.Fragment>
            </div>
          </div>
        </div>
        <div className={styles.city}>
          <span>发货地</span>
          <a className={styles.a1}>不限</a>
          <span>热门城市 :</span>
          <React.Fragment>
            { city.cityList.map((item, index) => {
              return (
                <a key={index} className={styles.citys}>{item}</a>
              );
            })
            }
          </React.Fragment>
          <a className={styles.a2}>全部城市</a>
        </div>
        <div className={styles.price}>
          <span>价格</span>
          <span>¥最低价格</span>
          <span>¥最高价格</span>
          <span>确定</span>
        </div>
      </div>
    );
  }
}
